<template>
	<view class="content">
		<view class="item-list" v-for="item in data" v-show="data.length > 0" :key="item.id">
			<img :src="item.previewImageUrl" @click="getCurrentItem(item)" />
			<view class="show-icon">
				<!-- 收藏 -->
				<img
					v-if="!item.favorite"
					src="./../../../static/common/unCollect.png"
					@click="tabCollection(item)"
				/>
				<img src="./../../../static/common/collected.png" @click="tabCollection(item)" v-else />
				<!-- 购物车 -->
				<img
					v-if="!item.joinedCart && isActiveFlag.value !== '0'"
					src="./../../../static/common/cartOuter.png"
					@click="tabCartOuter(item)"
				/>
				<img src="./../../../static/common/cartInner.png" @click="tabCartOuter(item)" v-else />
			</view>
		</view>

		<f-empty
			v-show="!data.length"
			:icon="emptyConfig.icon"
			:text="emptyConfig.text"
			:showAction="emptyConfig.showAction"
			:actionText="emptyConfig.actionText"
		/>
		<uni-popup ref="popup" @change="maskClick">
			<view class="popup-box" style="border-radius: 16rpx 16rpx 0px 0px">
				<view class="goods-description">
					<img :src="previewImageUrl" />
					<view class="description-text">
						<!-- <view class="goods-name">丝巾名称 </view> -->
						<view class="goods-num">{{ productCode }} </view>
						<view class="purchase-quantity">
							<span style="white-space: nowrap; width: auto">数量</span>
							:<uni-number-box
								class="number-box"
								v-model="form.num"
								@change="changeValue"
								:step="1"
								:min="min"
							/>
						</view>
					</view>
				</view>
				<view class="select-specifications-box">
					<view class="select-specifications-title">选择规格 </view>
					<view class="select-specifications-list">
						<view
							class="item-list"
							v-for="(item, index) in specificationsList"
							:class="currentItemId === index ? 'active-item-list-specs' : ''"
							:key="item.id"
							@click="changeSpecificationsList(item, index)"
						>
							{{ item.nickname }}</view
						>
					</view>
				</view>
				<view class="add-to-cart-btn" @click="addCart">
					<b-button type="primary" style="border-radius: 50rpx; font-size: 32rpx"
						>加入购物袋</b-button
					>
				</view>
			</view>
		</uni-popup>
	</view>
	<!-- 权限弹窗 -->
	<f-auth-modal v-if="$store('user').authModal"></f-auth-modal>
</template>

<script setup>
	import dataEmpty from '@/static/empty/data-empty.png';
	import { ref, defineEmits, reactive, computed } from 'vue';
	import collectionApi from '../../../sheep/api/collection.js';
	import goodsDetailApi from '../../../sheep/api/goodsDetail.js';

	import cartApi from '../../../sheep/api/cart.js';
	import $store from '@/sheep/store';

	const emit = defineEmits(['getCurrentItem', 'updateDataList']);
	const props = defineProps({
		data: {
			type: Array,
			default: () => {
				return [];
			},
		},
	});

	const min = 1;
	const emptyConfig = reactive({
		icon: dataEmpty,
		text: '空空如也',
		showAction: true,
		actionText: '去登陆/注册 >>',
	});
	const userInfo = computed(() => JSON.parse(JSON.stringify($store('user').userInfo)));
	console.log('userInfo===', userInfo);

	// 收藏切换
	const tabCollection = (item) => {
		// 试用用户权限控制
		if (userInfo.value.roleType == 21) {
			$store('user').setAuthModal(true);
			return;
		}
		let data = {
			ids: [`${item.id}`],
		};
		if (!item.favorite) {
			//添加收藏
			collectionApi.addCollectionList(data).then((res) => {
				item.favorite = !item.favorite;
				return uni.showToast({
					title: '已收藏',
					icon: 'success',
					mask: true,
				});
			});
		} else {
			//取消收藏
			collectionApi.cancelCollectionList(data).then((res) => {
				item.favorite = !item.favorite;
				emit('updateDataList', item);
				return uni.showToast({
					title: '已取消',
					icon: 'success',
					mask: true,
				});
			});
		}
	};
	const popup = ref(null);
	const form = ref({
		isInCart: false,
		num: 1,
		showName: '',
	});
	const changeValue = (value) => {
		form.value.num = value;
	};
	const specificationsList = ref([]);
	const currentItemId = ref(null);
	const previewImageUrl = ref('');
	const productCode = ref(''); //图片编码
	const selectItemId = ref('');

	const getShowDialog = (item) => {
		goodsDetailApi.getGooosDetail(item).then((res) => {
			uni.hideTabBar();
			popup.value.open('bottom');
			isActiveFlag.value = '0';
			specificationsList.value = res.data?.printTypes;
			productCode.value = res.data.name;
			previewImageUrl.value = res.data.previewImageUrl;
		});
	};
	// 选择规格
	const changeSpecificationsList = (item, index) => {
		currentItemId.value = index;
		form.value.showName = item.name;
	};
	// 购物车切换
	const tabCartOuter = (item) => {
		// 试用用户权限控制
		if (userInfo.value.roleType == 21) {
			$store('user').setAuthModal(true);
			return;
		}
		selectItemId.value = item.id;
		getShowDialog(item);
	};
	const getCurrentItem = (item) => {
		console.log(userInfo.value.roleType);
		// 试用用户权限控制
		if (userInfo.value.roleType == 21) {
			$store('user').setAuthModal(true);
			return;
		}
		emit('getCurrentItem', item);
	};
	const isActiveFlag = ref('1');
	const buttonText = ref('加入购物袋');
	const addCart = () => {
		if (!form.value.num) {
			return uni.showToast({
				title: '请选择商品数量',
				icon: 'error',
				mask: true,
			});
		}
		if (!form.value.showName) {
			return uni.showToast({
				title: '请选择商品规格',
				icon: 'error',
				mask: true,
			});
		}

		//添加到购物车
		let data = {
			imageId: selectItemId.value,
			printType: form.value.showName,
			count: form.value.num,
		};
		cartApi
			.appendCart(data)
			.then((res) => {
				isActiveFlag.value = '1';
				popup.value.close();
				// 判断用户点击的当前项,然后手动改变当前项中joinedCart字段的值,无感切换亮显图标,不需要刷新页面
				props.data.forEach((item) => {
					if (item.id === selectItemId.value) {
						item.joinedCart = true;
					}
				});
				uni.showToast({
					title: '该商品已添加至购物袋',
					icon: 'success',
					mask: true,
				});
			})
			.catch((error) => {
				console.log(error);
			})
			.finally(() => {
				uni.showTabBar();
			});
	};
	// 重置表单
	const resetFields = () => {
		// 表单重置
		form.value = {
			isInCart: false,
			num: 1,
			showName: undefined,
		};
		// 当前选中项重置
		currentItemId.value = null;
	};
	const maskClick = (e) => {
		if (e.show) {
			uni.hideTabBar();
		} else {
			resetFields();
			uni.showTabBar();
		}
	};
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item-list {
			background: #ffffff;
			margin-top: 16rpx;
			img {
				width: 312rpx;
				height: 312rpx;
				padding: 12rpx 12rpx 0 12rpx;
				object-fit: contain;
			}
			.show-icon {
				height: 64rpx;
				display: flex;
				justify-content: space-between;
				img {
					width: 36rpx;
					height: 36rpx;
					object-fit: cover;
				}
			}
		}
	}
	.popup-box {
		height: 878rpx;
		padding: 40rpx 32rpx 0;
		background: #ffffff;
		.goods-description {
			width: 540rpx;
			height: 248rpx;
			display: flex;
			justify-content: space-between;
			img {
				height: 100%;
				object-fit: contain;
			}
			.description-text {
				padding-left: 16rpx;
				.goods-name {
					height: 56rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #111111;
					text-align: left;
					font-style: normal;
				}
				.goods-num {
					width: 236rpx;
					height: 44rpx;
					margin-top: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.purchase-quantity {
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #111111;
					font-style: normal;
					.number-box {
						padding-left: 24rpx;
					}
				}
			}
		}
		.select-specifications-box {
			width: 668rpx;
			margin-top: 32rpx;
			.select-specifications-title {
				width: 134rpx;
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
			.select-specifications-list {
				max-height: 256rpx;
				overflow: scroll;
				margin-top: 24rpx;
				padding-top: 32rpx;
				border-top: 1px solid #d8d8d8;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.active-item-list-specs {
					background: #ff6c01 !important;
					color: #ffffff !important;
				}
				.item-list {
					width: 310rpx;
					height: 52rpx;
					margin: 10rpx;
					background: #eef0f2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					font-style: normal;
				}
			}
		}
		.add-to-cart-btn {
			width: 668rpx;
			height: 88rpx;
			position: absolute;
			top: 90%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
